window.addEventListener('load', function () {
    //1.获取元素
    var focus = document.querySelector('.switch_img');
    var ul = focus.children[0];
    //获取focus宽度
    var w = focus.offsetWidth;

    // 更新 w 的值
    function updateWidth() {
        w = focus.offsetWidth;
    }

    // 监听窗口大小变化
    window.addEventListener('resize', updateWidth);

    //2.利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function () {
        index ++;
        var translatex = -index * w;
        ul.style.transition = 'all.3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);

    //等过度完成后，判断监听过渡完成的事件
    ul.addEventListener('transitionend', function () {
        //无缝滚动
        if (index >= 4) {
            index = 0;
        } else if (index < 0) {
            index = 2;
        }

        //去除过度效果
        ul.style.transition = 'none';
        var translatex = -index * w;
        ul.style.transform = 'translateX(' + translatex + 'px)';
    })

    //4.手指滑动轮播图
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        //手指触摸时，停止计时器
        window.clearInterval(timer);
    });

    ul.addEventListener('touchmove', function (e) {
        //计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        //移动盒子：原来盒子的位置 + 手指移动的距离
        var translatex = -index * w + moveX;
        //手指拖动时不需要动画效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true;
        e.preventDefault(); //阻止滚动屏幕的行为
    });

    //判断手指离开时，回弹到上一张还是下一张
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            //1) 如果移动距离大于50px就播放上一张或下一张
            if (Math.abs(moveX) >= 180) {
                //右划播放上一张，moveX是正值，左划播放下一张，moveX是负值
                if (moveX > 0) {
                    index --;
                } else {
                    index ++;
                }

                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                //(2) 如果移动距离小于50px就回弹
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }

        //手指离开重新开始计时器
        clearInterval(timer);
        timer = setInterval(function () {
            index ++;
            var translatex = -index * w;
            ul.style.transition = 'all.3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });
})